<template>
  <!-- 数据可视化首页 -->
  <div class="app-container theme-bg-index">
    <!-- 头部区域 -->
    <header>
      <div class="center-img">
        <p>设备统计</p>
        <el-date-picker
          v-model="date"
          type="daterange"
          size="small"
          class="statistics-date"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="dateChange"
        />
        <button class="export" @click="exportData">导出</button>
      </div>
    </header>
    <!-- 内容区 -->
    <section>
      <el-tabs v-model="currentTable" class="statistics-tab">
        <el-tab-pane label="设备类型" name="0">
          <equimentType ref="equimentType" :table-data="equimentList" />
        </el-tab-pane>
        <el-tab-pane label="地区类型" name="1">
          <region ref="region" :table-data="tableData" />
        </el-tab-pane>
      </el-tabs>
    </section>
  </div>
</template>

<script>
import { equipmentReginaStatistics, equipmentStatistics } from '@/api/statisticalAnalysis/statistics/equiment'
import equimentType from './equimentType'
import region from './region'
export default {
  name: 'Equiment',
  components: {
    equimentType,
    region
  },
  data() {
    return {
      // 时间搜索
      date: '',
      filter: {
        statisticsStartTime: '',
        statisticsEndTime: ''
      },
      equimentList: [], // 设备类型
      tableData: [], // 地区类型
      currentTable: '0',
      options: [
        { value: '0', label: '钻机类型' },
        { value: '1', label: '地区类型' }
      ]
    }
  },
  mounted() {
    // 默认当前年份数据
    this.getList()
    this.getEquipmentReginaStatistics()
    this.currentTable = this.$route.params.currentTable ? this.$route.params.currentTable : '0'
  },
  methods: {
    // 改变时间
    dateChange(e) {
      if (e) {
        this.filter.statisticsStartTime = e[0]
        this.filter.statisticsEndTime = e[1]
      } else {
        this.filter.statisticsStartTime = ''
        this.filter.statisticsEndTime = ''
      }
      this.getList()
      this.getEquipmentReginaStatistics()
    },
    // 设备类型
    async getList() {
      const { data } = await equipmentStatistics(this.filter)
      if (data) {
        this.equimentList = data
      }
    },
    // 地区类型
    async getEquipmentReginaStatistics() {
      const { data } = await equipmentReginaStatistics(this.filter)
      if (data) {
        this.tableData = data
      }
    },
    // 导出
    exportData() {
      const c = this.currentTable
      if (c === '0') {
        this.$refs.equimentType.exportData()
      } else if (c === '1') {
        this.$refs.region.exportData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
  }
</style>
